<template>
  <div>
    <div v-if="!detailShow" class="list-page">
      <div class="list-page-container">
        <el-col :span="24" class="action-bar">
          <!--<el-input v-model="search.keyword" placeholder="线索名称/联系方式/负责人" style="width:200px"></el-input>
          <el-select filterable v-model="search.clue_stage_id" style="margin-left:20px;" placeholder="线索阶段">
            <el-option v-for="opt in clueStageList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
          <el-select filterable v-model="search.source" style="margin-left:20px;" placeholder="来源">
            <el-option v-for="opt in sourceList" :key="opt.id" :value="opt.id" :label="opt.label" />
          </el-select>
          <el-button type="primary" size="medium" style="margin-left:20px;" @click="searchData">检索</el-button>
          <el-button size="medium" style="margin-left:20px;" @click="restData">重置</el-button>-->
          <!--<router-link :to="{name: 'add_clue'}">

          </router-link>-->
          <el-button @click="addRestButton" type="primary" size="medium" style="margin-left:20px;">添加</el-button>
        </el-col>

        <el-table :default-sort = "{prop: 'updated_at', order: 'descending'}" stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中"
                  style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column align="center" prop="photo_url" label="用户头像">
            <template slot-scope="scope">
              <el-button type="text" size="medium">
                <img style="width: 50%;" :src="scope.row.user_info.photo_url" />
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="user_info.nickname" label="昵称" />
          <el-table-column prop="name" label="姓名">
            <template slot-scope="scope">
              <span style="color: #00a0e9;cursor: pointer" @click="getCustomerDetail(scope.row)">{{scope.row.customer_name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contact" label="联系方式"></el-table-column>
          <!--<el-table-column prop="" label="微信"></el-table-column>-->
          <el-table-column prop="user_info.company_name" label="公司名称"></el-table-column>
          <el-table-column prop="now_staff.realname" label="跟进人"></el-table-column>
          <el-table-column prop="creator_name" label="创建者"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button @click="showEditDialog(scope.row)" type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini" @click="delClue(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="footer-bar">
          <div class="page-code" style="text-align: center;">
            <el-pagination
              background :page-size="limit" layout="prev, pager, next" :total="totalPage" @current-change="pageChange">
            </el-pagination>
          </div>
        </el-col>
      </div>

      <el-dialog :title="addForm.id?'修改':'添加'" :visible.sync="editDialogShow">
        <el-form :model="addForm" ref="ruleForm" label-width="90px" label-position="left" class="demo-ruleForm">

          <h1>基本信息</h1>
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="addForm.customer_name"placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item label="联系方式：" prop="phone">
            <el-input v-model="addForm.contact" placeholder="请输入联系方式"></el-input>
            <div style="color: #f77878;font-size: 12px;"><span style="margin-right: 5px">*</span>联系方式若与小程序绑定的手机号码一致，将自动关联用户</div>
          </el-form-item>

          <el-form-item label="微信：" prop="wechat">
            <el-input  v-model="addForm.wechat" placeholder="请微信号"></el-input>
          </el-form-item>

          <div>
            <h1>地址信息</h1>
            <div class="container-section">
              <el-form-item label="地址：" prop="unit_name">
                <el-cascader placeholder="选择所在的地址" :options="ORIGIN" :props="{value:'label'}" v-model="addressInfo"
                             filterable></el-cascader>
              </el-form-item>
              <el-form-item label="详细地址：" prop="address">
                <el-input style="width: 350px" v-model="addForm.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
            </div>
          </div>

          <div>
            <h1>其他</h1>
            <div class="container-section">
              <el-form-item label="备注：" prop="email">
                <el-input style="width: 450px" type="textarea" v-model="addForm.remark" placeholder="备注"></el-input>
              </el-form-item>
            </div>
          </div>

          <div>
            <h1>跟进人</h1>
            <div class="container-section">
              <el-form-item label="跟进人：" prop="email">
                <el-select style="margin-left: 10px" filterable v-model="addForm.staff_id" placeholder="请选择跟进人">
                  <el-option v-for="opt in staffList" :key="opt.id" :value="opt.id" :label="opt.realname" />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="padding: 20px 0 10px 20px">
            <el-button size="medium" type="primary" @click="addSubmitBtn()">{{addForm.id?'修改':'添加'}}</el-button>
            <el-button @click="editDialogShow = false" size="medium" style="margin-left:20px;">取消</el-button>
          </div>

        </el-form>
      </el-dialog>

    </div>
    <div v-if="detailShow">
      <clue-detail @updateListData="updateListData" @closeDetailSection="closeDetailSection" :customerDetail="customerDetail" />
    </div>
  </div>
</template>

<script>
  import clue_detail from "@/views/marketingManage/clue/clue_detail";
  import ORIGIN from '../../../assets/json/origin.json'
  export default {
    name: "clue_list",
    components: {
      "clue-detail": clue_detail
    },
    data() {
      return {
        ORIGIN,
        addressInfo: ['','',''],
        search: {
          keyword: '',
          clue_stage_id: '',
          source: ''
        },
        clueStageList:[],
        sourceList:[
          {
            id:"0",
            label:"手动创建"
          },
          {
            id:"1",
            label:"小程序同步"
          }
        ],
        recycle_binList:[
          {
            id:"0",
            label:"否"
          },
          {
            id:"1",
            label:"是"
          }
        ],
        page: 1,
        totalPage: 0,
        tableData: [],
        tableLoadingShow: false,
        limit: 10,
        customerDetail: '',
        detailShow: false,
        addForm: {
          id: '',
          customer_name: '',
          contact: '',
          province: '',
          city: '',
          area: '',
          address: '',
          is_invalid: 1,
          remark: '',
          wechat: '',
          staff_id: ''
        },
        editDialogShow: false,
        staffList: []
      }
    },
    mounted() {
      this.getCustomerClueList();
      this.getStaffList()
      /*this.getClueStageList();*/
      /*this.getRecycleBinClueList()//获取回收站列表，这里只是为了获取回收站列表的数量*/
    },
    methods: {

      async getStaffList() {
        let params = {
          limit:999,
          page:1,
        }
        const res = await this.$api.getStaffList(params)
        if(res.data.level=="success"){
          this.staffList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      },

      updateListData() {
        this.getCustomerClueList()
      },

      showEditDialog(item) {
        console.log(item)
        this.editDialogShow = true
        this.addForm.id = item.id
        this.addForm.customer_name = item.customer_name
        this.addressInfo = [item.province,item.city,item.area]
        this.addForm.address = item.address
        this.addForm.contact = item.contact
        this.addForm.remark = item.remark
        this.addForm.wechat = item.wechat
        item.now_staff!=null?this.addForm.staff_id = item.now_staff.id:this.addForm.staff_id =""
      },

      //重置
      restData(){
        this.page = 1;
        this.search.keyword= "";
        this.search.clue_stage_id= "";
        this.search.source = '';
        this.getCustomerClueList();
      },
      //检索
      searchData() {
        this.page = 1;
        this.getCustomerClueList();
      },

      //获取列表数据
      async getCustomerClueList() {
        this.tableLoadingShow = true;
        let params = {
          limit:10,
          page:this.page,
          /*keyword:this.search.keyword,
          source: this.search.source,
          clue_stage_id:this.search.clue_stage_id,*/
        };
        const res = await this.$api.getCustomerClueList(params)
        if(res.data.level=="success"){
          this.tableData = res.data.data
          this.totalPage = res.data.page_info.total
        } else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false
      },

      getCustomerDetail(item) {
        this.detailShow = true
        this.customerDetail = item
      },



      /*// 获取线索阶段列表数据
      async getClueStageList() {
        let params = {
          limit: 999,
          page: 1
        };
        const res = await this.$api.getClueStageList(params);
        if (res.data.level === 'success') {
          this.clueStageList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      },*/

      //删除
      async delClue(id){
        let _this = this;
        const params = {
          id:id,
        }
        //删除
        const judge= this.$confirm('是否删除该线索?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delCustomerClue(params)
          if(res.data.level=='success'){
            if(this.tableData.length==1&&this.page>1){
              this.page --;
            }
            _this.getCustomerClueList();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
        });
      },

      //分页
      pageChange(e) {
        this.page = e
        this.getCustomerClueList()
      },

      closeDetailSection(){
        this.detailShow = false
      },

      //新增提交按钮
      async addSubmitBtn(){
        this.addForm.province = this.addressInfo[0]
        this.addForm.city = this.addressInfo[1]
        this.addForm.area = this.addressInfo[2]

        const params = this.addForm;
        const res = await this.$api.setCustomerClue(params);
        if(res.data.level=='success'){
          /*this.$message({
            message: this.addForm.id?'修改成功':'添加成功',
            type: 'success',
          });*/
          this.getCustomerClueList()
          /*this.editDialogShow = false*/
          this.setCustomerServiceStaff(res.data.data.id)
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      async setCustomerServiceStaff(id) {
        let params = {
          staff_id: this.addForm.staff_id,
          customer_clue_id: id
        }
        const res = await this.$api.setCustomerServiceStaff(params)
        if(res.data.level=="success"){
          this.$message.success(res.data.message)
          this.getCustomerClueList()
        } else {
          this.$message.error(res.data.message)
        }
        this.editDialogShow = false
      },

      addRestButton() {
          this.addForm.id = ''
          this.addForm.customer_name = ''
          this.addForm.contact = ''
          this.addForm.province = ''
          this.addForm.city = ''
          this.addForm.area = ''
          this.addForm.address = ''
          this.addForm.is_invalid = ''
          this.addForm.remark = ''
          this.addForm.wechat = ''
        this.addForm.staff_id = ''
          this.addressInfo =['','','']
          this.editDialogShow = true
      }

      /*//展示回收站窗口
      showRecycleBindDialog() {
        this.recycleBinVisible = true
        this.recycleBinPage = 1
        this.getRecycleBinClueList()
      },*/

      /*//获取列表数据
      async getRecycleBinClueList() {
        let params = {
          limit: this.recycleBinLimit,
          page:this.recycleBinPage,
          join_recycle_bin: 1
        };
        const res = await this.$api.getCustomerClueList(params)
        if(res.data.level=="success"){
          this.recycleBinList = res.data.data
          this.recycleBinTotal = res.data.page_info.total
        } else {
          this.$message.error(res.data.message)
        }
      },
*/
      //清空回收站
      /*async clearRecycleBin(type,id) {
        let params = {
          type: type,
          clue_id: id
        };
        const res = await this.$api.clearRecycleBin(params)
        if(res.data.level=="success"){
          if(this.recycleBinList.length==1&&this.recycleBinPage>1){
            this.recycleBinPage = this.recycleBinPage -1
          }
          this.getRecycleBinClueList()
          /!*this.getCustomerClueList()*!/
        } else {
          this.$message.error(res.data.message)
        }
      },*/

      //恢复回收站
      /*async restoreClue(type,id) {
        let params = {
          type: type,
          clue_id: id
        };
        const res = await this.$api.restoreClue(params)
        if(res.data.level=="success"){
          if(this.recycleBinList.length==1&&this.recycleBinPage>1){
            this.recycleBinPage = this.recycleBinPage -1
          }
          this.getRecycleBinClueList()
          /!*this.getCustomerClueList()*!/
        } else {
          this.$message.error(res.data.message)
        }
      },*/

      //分页
      /*recycleBinPageChange(e) {
        this.recycleBinPage = e
        this.getRecycleBinClueList()
      },*/


    }
  }
</script>


<style lang="scss" scoped>
  h1{
    font-size: 18px;
    color: #333333;
  }
  .list-page{

    .list-page-container{
      padding: 10px;
    }

    .action-bar-input{
      width: 150px;
      margin-left: 14px;
    }
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin-bottom: 5px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
    .footer-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      /*background: #f2f2f2;*/
      padding: 8px 0;
      margin: 10px 0px;
      box-sizing: border-box;
      text-align: center;
    }
  }
  .delete-icon{
    position: fixed;
    right: 50px;
    bottom: 10px;
    font-size: 28px;
    cursor: pointer;
  }
</style>
<style scoped>
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }
</style>
